<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <el-button type="primary" @click="created">增加</el-button>

        <el-button-group>
          <el-button type="warning">总数</el-button>
          <el-button>{{ state.total }} 条</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table v-loading="state.loading" ref="multipleTable" :data="state.tableData" tooltip-effect="dark"
      style="width: 100%" @selection-change="selectionChangeIds">
      <el-table-column type="selection" width="50"/>
      <el-table-column prop="id" label="#ID" width="50" align="center"/>
      <el-table-column v-viewer label="ICON" align="center" width="200">
        <template #default="scope">
          <img class="img-banner"
            :src="scope.row.icon"
            @click="preview(scope.row)"
            alt="轮播图"/>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="名称" align="center">
        <template #default="scope">
          <el-input v-model.trim="scope.row.title" @change="updatus(scope.row)"/>
        </template>
      </el-table-column>

      <el-table-column label="排序值" align="center" width="150">
        <template #default="scope">
          <el-input v-model.number="scope.row.orderby"
            @change="updatus(scope.row)"
            :input-style="{
                textAlign: 'center'
              }"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="隐藏/显示" align="center" width="150">
        <template #default="scope">
          <el-switch v-model="scope.row.hide"
            :active-value="1"
            :inactive-value="2"
            @change="updatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template #default="scope">
          <el-button type="primary" @click="updated(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

  <DialogMenu ref="refmenu" :reload="getList"></DialogMenu>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src" :alt="src">
  </viewer>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import DialogMenu from "../../components/DialogMenu.vue";
import { ElMessage } from "element-plus";
import { AdminWxaMenuGet, AdminWxaMenuPut } from "../../api/server/config";

const { proxy } = getCurrentInstance()
const images = ref([])
const refmenu = ref(null);
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  checkedIds: [], // 选中项
  total: 0, // 总条数
});

onMounted(() => {
  getList()
})

const getList = () => {
  state.loading = true;
  AdminWxaMenuGet({}).then((list) => {
    state.tableData = list
    state.total = list?.length || 0
    state.loading = false;
  });
}

const selectionChangeIds = row => {
  state.checkedIds = row;
}

const preview = (row) => {
  proxy.$viewerApi({ images: [row.icon] })
}

const created = () => {
  refmenu.value.open();
}

const updatus = (row) => {
  AdminWxaMenuPut(row.id, row).then((res) => {
    ElMessage.success('操作成功')
    getList()
  })
}

const updated = row => {
  refmenu.value.open(row.id)
}

</script>

<style scoped>
.swiper-container {
  min-height: 100%;
}

:deep(.el-card.is-always-shadow) {
  min-height: 100%;
}

img.img-banner {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 1px dotted rgb(64 158 255 / 33%);
  object-fit: cover;
  cursor: pointer;
}
</style>
